﻿<%@ Page Title="Sent SMS" Language="C#" MasterPageFile="~/App_MasterPages/Aquarius.Master"
    AutoEventWireup="true" CodeBehind="SentSMS.aspx.cs" Inherits="PepsiCo.UI.SentSMS" %>

<%@ Register Src="UserControl/ucPaging.ascx" TagName="ucPaging" TagPrefix="uc1" %>
<asp:Content ID="Content1" ContentPlaceHolderID="CssContent" runat="server">
    <style type="text/css">
        label{display: inline-block;font-size: 12px;}
        td span{display: block;}
        #td_message span{display: inline;}
        label input[type=text]{color: #333333;font-size: 11px;line-height: 16px; margin: 0;
            padding: 3px 2px 3px 5px;width: 110px;height: auto;background-color: #FFFFFF;border: 1px solid #CCCCCC;display: inline-block;
            border-radius: 3px 3px 3px 3px;font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;vertical-align: middle;}
    </style>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ScriptContent" runat="server">
    <script src="Scripts/pepsico-script/jquery.textchange.js" type="text/javascript"></script>
    <script type="text/javascript">
        function CheckAllItem(checked) {
            var table = $("#tbPhoneNumber tbody");
            $('td input:checkbox[name=chkItem]', table).prop('checked', checked);
            var tr = $("input:checkbox[name=chkItem]", table).parents("tr");
            if (checked) {
                $("td input:checkbox[name=chkItem]", table).parent().addClass("checked");
                tr.each(function () {
                    $('td input:checkbox[name=chkPhoneNumber]', $(this)).first().prop('checked', checked);
                    $("td input:checkbox[name=chkPhoneNumber]", $(this)).first().parent().addClass("checked");
                });
            }
            else {
                $("td input:checkbox[name=chkItem]", table).parent().removeClass("checked");
                tr.each(function () {
                    $('td input:checkbox[name=chkPhoneNumber]', $(this)).prop('checked', false);
                    $("td input:checkbox[name=chkPhoneNumber]", $(this)).parent().removeClass("checked");
                });
            }
        }

        function CheckFullInfo() {
            var table = $("#tbPhoneNumber tbody");
            if ($('td input:checked', table).length == 0 && $("#<%=txtAddedPhoneNumber.ClientID%>").val().length == 0) {
                alert('Phone number to send message must be atleast one!');
                return false;
            }
            if ($("#<%=txtMessage.ClientID%>").val().length == 0) {
                alert('Message not allow empty!');
                return false;
            }
            return confirm("Are you sure sending message?");
        }

        $(document).ready(function () {
            var availableTags = [
                    <%=availableTags%>
                ];
            $("#<%=txtStaffName.ClientID%>").autocomplete({
                source: availableTags
            });
            $('#tbPhoneNumber tbody tr:odd').addClass('odd');
            $('#tbPhoneNumber tbody tr').hover(function () {
                $(this).addClass('hover');
            }, function () {
                $(this).removeClass('hover');
            });



            $("#<%=txtMessage.ClientID%>").bind('textchange', function () {
                var str = $(this).val();
                var letter = str.length;
                var message = 0, letterPermessage = 0;
                if (!ContainsUnicodeCharacter(str)) {
                    if (letter <= 160)
                        letterPermessage = 160;
                    else
                        letterPermessage = 153;
                }
                else {
                    if (letter <= 70)
                        letterPermessage = 70;
                    else
                        letterPermessage = 67;
                }
                var message = Math.floor(letter / letterPermessage);
                var div = letter % letterPermessage;
                if (div > 0) message += 1;
                if (message == 0) message = 1;
                $("#lbletter").html(letter);
                $("#lbmessage").html(message);
            });
        });

        function ContainsUnicodeCharacter(str) {
            for (var i = 0, n = str.length; i < n; i++) {
                if (str.charCodeAt(i) > 127) {
                    return true;
                }
            }
            return false;
        }

        function GetPhoneNumber() {
            var phoneList = "";
            $("#tbPhoneNumber tbody td input:checked[name $=chkPhoneNumber]").each(function () {
                phoneList += "," + $(this).val();
            });
            $("#<%=hdfPhoneList.ClientID%>").val(phoneList);
        }

        function chkItem_Change(obj) {
            var tr = $(obj).parents("tr");
            if (obj.checked) {
                $('input:checkbox[name=chkPhoneNumber]', tr).first().prop('checked', true);
                $("input:checkbox[name=chkPhoneNumber]", tr).first().parent().addClass("checked");
            }
            else {
                $('input:checkbox[name=chkPhoneNumber]', tr).prop('checked', false);
                $("input:checkbox[name=chkPhoneNumber]", tr).parent().removeClass("checked");
            }
        }

        function chkCheckPhoneNumber_Change(obj) {
            var table = $("#tbPhoneNumber tbody");
            var tr = $('td input:checked[name=chkItem]', table).parents("tr");
            if (obj.checked) {
                tr.each(function () {
                    $('input:checkbox[name=chkPhoneNumber]', $(this)).prop('checked', true);
                    $("input:checkbox[name=chkPhoneNumber]", $(this)).parent().addClass("checked");
                });
            }
            else {
                tr.each(function () {
                    $('input:checkbox[name=chkPhoneNumber]', $(this)).prop('checked', false);
                    $("input:checkbox[name=chkPhoneNumber]", $(this)).parent().removeClass("checked");
                    $('input:checkbox[name=chkPhoneNumber]:first', $(this)).parent().addClass("checked");
                });
            }
        }
    </script>
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="MainContent" runat="server">
    <div class="row-fluid">
        <div class="span4" style="width: 27%">
            <div class="head">
                <div class="isw-list">
                </div>
                <h1>
                    SMS Content
                </h1>
                <div class="clear">
                </div>
            </div>
            <div class="block-fluid ui-widget ui-widget-content ui-corner-all" style="padding: 10px;
                overflow: auto">
                <div style="width: 100%">
                    <table cellpadding="0" cellspacing="0" width="100%">
                        <tr>
                            <td>
                                Unit
                            </td>
                            <td>
                                <asp:DropDownList ID="ddlUnit" runat="server" Width="135px" AutoPostBack="true" OnSelectedIndexChanged="ddlUnit_SelectedIndexChanged" />
                                <asp:CheckBox ID="chkRecursive" runat="server" AutoPostBack="true" OnCheckedChanged="chkRecursive_CheckedChanged"
                                    Checked="true" />
                                <span style="display: inline">Recursive</span>
                            </td>
                            <td>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                Short Code
                            </td>
                            <td>
                                <asp:DropDownList ID="ddlShorCode" runat="server" />
                            </td>
                        </tr>
                        <tr>
                            <td>
                                Message
                            </td>
                            <td>
                                <asp:TextBox ID="txtMessage" runat="server" TextMode="MultiLine" Rows="10" />
                            </td>
                        </tr>
                        <tr>
                            <td>
                                Added number
                            </td>
                            <td>
                                <asp:TextBox ID="txtAddedPhoneNumber" runat="server" TextMode="MultiLine" Rows="5"
                                    onkeypress="return ValidateKeypress(/[\d,]/,event);" />
                            </td>
                        </tr>
                        <tr>
                            <td align="right" colspan="2" id="td_message">
                                <span style="float: left;"><span id="lbletter">0</span> letter / <span id="lbmessage">
                                    1</span> message </span>
                                <asp:Button ID="btnSentMessage" runat="server" Text="Send" OnClick="btnSentMessage_Click"
                                    OnClientClick="GetPhoneNumber(); return CheckFullInfo();" CssClass="btn" />
                            </td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>
        <div class="span8" style="margin-left: 1%; width: 72%;">
            <div class="head">
                <div class="isw-list">
                </div>
                <h1>
                    Phone List</h1>
                <div class="clear">
                </div>
            </div>
            <div class="block-fluid table-sorting">
                <div role="grid" class="dataTables_wrapper" id="tSortable_wrapper">
                   <div id="tSortable_length" class="dataTables_length" style="width:250px">
                        <label>
                            Show
                            <asp:DropDownList ID="ddlSortable_length" size="1" aria-controls="tSortable" runat="server"
                                OnSelectedIndexChanged="ddlSortable_length_SelectedIndexChanged" AutoPostBack="true">
                                <asp:ListItem Value="5">5</asp:ListItem>
                                <asp:ListItem Value="10">10</asp:ListItem>
                                <asp:ListItem Value="25">25</asp:ListItem>
                                <asp:ListItem Value="50" Selected="True">50</asp:ListItem>
                                <asp:ListItem Value="100">100</asp:ListItem>
                                <asp:ListItem Value="200">200</asp:ListItem>
                                <asp:ListItem Value="300">300</asp:ListItem>
                                <asp:ListItem Value="400">400</asp:ListItem>
                                <asp:ListItem Value="500">500</asp:ListItem>
                            </asp:DropDownList> entries 
                        </label>
                    </div>
                    <div class="dataTables_length" style="width:550px">
                       <label>
                            Staff type
                            <asp:DropDownList ID="ddlStaffType" runat="server" size="1" 
                            aria-controls="tSortable" AutoPostBack="true" 
                            onselectedindexchanged="ddlStaffType_SelectedIndexChanged" />
                       </label>
                            &nbsp;&nbsp; &nbsp;
                       <label>
                            Staff level
                            <asp:DropDownList ID="ddlStaffLevel" runat="server" size="1" 
                            aria-controls="tSortable" AutoPostBack="true" 
                            onselectedindexchanged="ddlStaffLevel_SelectedIndexChanged" />
                       </label>
                            &nbsp;&nbsp; &nbsp;
                       <label>
                            Staff Name
                            <asp:TextBox ID="txtStaffName" runat="server" ontextchanged="txtStaffName_TextChanged" AutoPostBack="true"/>
                       </label>
                    </div>
    
                    <asp:UpdatePanel ID="udpn" runat="server">
                        <ContentTemplate>
                            <div>
                                <uc1:ucPaging ID="pagingtop" runat="server" />
                            </div>
                            <table cellpadding="0" cellspacing="0" width="100%" id="tbPhoneNumber" class="table dataTable">
                                <thead>
                                    <tr>
                                        <th>No</th>
                                        <th style="width: 20px">
                                            <input type="checkbox" id="chkCheckAll" onclick="CheckAllItem(this.checked);" />
                                        </th>
                                        <th>Unit Name</th>
                                        <th style="width: 150px">Staff Name</th>
                                        <th>Staff Level</th>
                                        <th>Staff Type</th>
                                        <th style="width: 115px">
                                            <input type="checkbox" id="chkCheckPhoneNumber" onchange="chkCheckPhoneNumber_Change(this);" />
                                            Phone Number
                                        </th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <asp:Repeater ID="rptPhone" runat="server" OnItemDataBound="rptPhone_ItemDataBound">
                                        <ItemTemplate>
                                            <tr>
                                                <td style="text-align:center">
                                                    <%#(Container.ItemIndex +1) + (pagingtop.CurrentPage - 1) * pagingtop.PageSize %>
                                                </td>
                                                <td align="center">
                                                    <input type="checkbox" name="chkItem" onchange="chkItem_Change(this)" />
                                                </td>
                                                <td><%#Eval("UnitName")%></td>
                                                <td><%#Eval("StaffName")%></td>
                                                <td><%#Eval("StaffLevel")%></td>
                                                <td><%#Eval("StaffTypeName")%></td>
                                                <td id="tdPhoneNumber" runat="server"></td>
                                            </tr>
                                        </ItemTemplate>
                                    </asp:Repeater>
                                </tbody>
                            </table>
                            <div class="dataTables_info" id="tSortable_info">
                                <asp:Literal ID="ltrInfo" runat="server" />
                            </div>
                            <div class="dataTables_paginate paging_full_numbers" id="tSortable_paginate">
                                <uc1:ucPaging ID="pagingbottom" runat="server" />
                            </div>
                        </ContentTemplate>
                        <Triggers>
                            <asp:AsyncPostBackTrigger ControlID="ddlUnit" EventName="SelectedIndexChanged" />
                            <asp:AsyncPostBackTrigger ControlID="chkRecursive" EventName="CheckedChanged" />
                            <asp:AsyncPostBackTrigger ControlID="ddlSortable_length" EventName="SelectedIndexChanged" />
                            <asp:AsyncPostBackTrigger ControlID="ddlStaffType" EventName="SelectedIndexChanged" />
                            <asp:AsyncPostBackTrigger ControlID="ddlStaffLevel" EventName="SelectedIndexChanged" />
                            <asp:AsyncPostBackTrigger ControlID="txtStaffName" EventName="TextChanged" />
                        </Triggers>
                    </asp:UpdatePanel>
                </div>
                <div class="clear">
                </div>
            </div>
        </div>
        <asp:HiddenField ID="hdfPhoneList" runat="server" />
        <input type="hidden" id="formId" value="SentSMS" />
    </div>
    <asp:UpdateProgress ID="udprogress" DisplayAfter="1" runat="server">
        <ProgressTemplate>
            <div class="ui-widget-overlay ui-front">
                <img src="images/loading.gif" alt="Loading..." style="position: fixed; top: 50%;
                    left: 50%" />
            </div>
        </ProgressTemplate>
    </asp:UpdateProgress>
</asp:Content>
